<template>
  <!--投诉-->
  <div>
    <!--查找-->
    <el-row>
      <span style="padding: 0 10px"><i class="font-14 el-icon-s-open"></i></span>
      <el-select v-model="type" placeholder="全部数据" style="width: 120px" @change="changeType">
        <el-option v-for="item in AllOptions" :key="item.value"
                   :label="item.label" :value="item.value">
        </el-option>
      </el-select>
      <span style="padding: 0 10px 0 30px"><i class="fn el-icon-message-solid"></i></span>
      <!--<el-input placeholder="请输入内容" style="width: 150px"></el-input>
      <el-button type="text">
        <el-button icon="el-icon-search" size="small" >投诉主题</el-button>
      </el-button>-->
      <el-input @change="changeType" placeholder="请输入内容"  suffix-icon="el-icon-search" style="width: 150px" v-model="search"></el-input>
      <span>投诉主题</span>
    </el-row>
    <!--投诉管理-->
    <el-row style="margin-top: 15px">
      <el-col :span="12">
        <span set-lan="html:投诉管理">投诉管理</span>
        <small class="text-muted font-13">共{{totalSize}}条</small>
      </el-col>
      <el-col :span="12" class="text-right">
        <el-button type="text" @click="dialogFormVisible = true">
          <el-button size="small" icon="el-icon-circle-plus-outline">新建</el-button>
        </el-button>
      </el-col>
      <!--投诉管理dialog-->
      <el-dialog title="投诉管理" :visible.sync="dialogFormVisible" @open="openDialog"  @close='closeDialog'  width="60%" style="color: #333333"  >
        <el-form :model="complain" ref="complain" label-width="100px" :rules="rules">
          <el-divider><span class="font-14-bold">投诉管理</span></el-divider>
          <el-row>
            <el-col>
              <el-form-item label="对应客户:" prop="customerByCustomerId.customerName">
                <el-input :disabled="true"  v-model="complain.customerByCustomerId.customerName" style="width: 91%"></el-input>
              </el-form-item>
              <div class="form-inline" v-show="isCustomer">
                <el-input v-model="customerValue" @input="findCustomer" clearable size="medium" placeholder="拼音.字母.关键字" style="width: 150px"></el-input>
                <el-button @click="findCustomer" size="medium" icon="el-icon-search"></el-button>
                <el-popover placement="top" width="140" v-model="visible">
                  <ul class="cu-ul" v-if="customerList2 != ''">
                    <li @click="choiceCustomer2(item)" v-for="item in customerList2">{{item.customerName}}</li>
                  </ul>
                  <div style="color: #5d9cec;margin: 5px 0;text-align: center" v-if="customerList2 == ''"><i class="el-icon-warning-outline"/>没有该客户！</div>
                </el-popover>
                <el-tooltip class="item" effect="dark" content="浏览选择客户" placement="bottom">
                  <el-button @click="innerVisible(cusCurrPage,cusPageSize)" size="medium" icon="el-icon-s-operation"></el-button>
                </el-tooltip>
              </div>
            </el-col>
          </el-row>
          <el-row>
            <el-col>
              <el-form-item label="投诉主题:" prop="complainTheme">
                <el-input v-model="complain.complainTheme" style="width: 91%"></el-input>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="12">
              <el-form-item label="接待人:" prop="employeeByEmpId.empName">
                <el-input :disabled="true" v-model="complain.employeeByEmpId.empName" style="width: 79%">
                  <el-button @click="openEmpDialog" slot="append" icon="el-icon-search"></el-button>
                </el-input>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="分类:">
                <el-select v-model="complain.complainType" placeholder="未选" style="width: 79%">
                  <el-option  v-for="item in types" :key="item.value"
                             :label="item.label" :value="item.value">
                  </el-option>
                </el-select>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col>
              <el-form-item label="描述:">
                <el-input type="textarea"  v-model="complain.complainDescribe" :autosize="{ minRows: 2, maxRows: 2}" style="width: 91%"></el-input>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="12">
              <el-form-item  label="日期:" prop="complainDate">
                <el-date-picker  v-model="complain.complainDate"  type="date" style="width: 79%"></el-date-picker>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item  label="时间:" prop="complainTime">
                <el-time-picker  v-model="complain.complainTime" style="width: 79%" value-format="HH:mm:ss"></el-time-picker>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col>
              <el-form-item  label="投诉人:">
                <el-select  v-model="complain.complainContactName" placeholder="未选" style="width: 91%">
                  <el-option v-for="(item,index) in contactList" :key="index" :label="item.contactName" :value="item.contactName">
                  </el-option>
                </el-select>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col>
              <el-form-item label="紧急程度:">
                <el-radio-group v-model="radio1">
                  <el-radio :label=5>非常紧急</el-radio>
                  <el-radio :label=6>急</el-radio>
                  <el-radio :label=7>普通</el-radio>
                </el-radio-group>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col>
              <el-form-item label="处理结果:">
                <el-radio-group v-model="radio2">
                  <el-radio :label=8>未处理</el-radio>
                  <el-radio :label=9>处理中</el-radio>
                  <el-radio :label=10>处理完成</el-radio>
                </el-radio-group>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="12">
              <el-form-item  label="花费时间:">
                <el-select v-model="complain.complainCostTime" placeholder="未选"   style="width: 79%">
                  <el-option v-for="item in times" :key="item.value"
                             :label="item.label" :value="item.value">
                  </el-option>
                </el-select>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col>
              <el-form-item label="客户反馈:">
                <el-input  v-model="complain.complainFeedback" type="textarea" :autosize="{ minRows: 2, maxRows: 3}"  style="width: 91%"></el-input>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col>
              <el-form-item label="回访确认:">
                <el-input  v-model="complain.complainReturnVisit" type="textarea" :autosize="{ minRows: 2, maxRows: 3}" style="width: 91%"></el-input>
              </el-form-item>
            </el-col>
            <el-col>
              <el-form-item label="备注:">
                <el-input  v-model="complain.complainRemarks" type="textarea" :autosize="{ minRows: 2, maxRows: 3}" style="width: 91%"></el-input>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="12" :offset="7">
              <el-form-item>
                <el-button type="primary" @click="addComplain()">保存</el-button>
                <el-button @click="dialogFormVisible = false">取消</el-button>
              </el-form-item>
            </el-col>
          </el-row>
          <el-dialog width="30%" title="人员选择" :visible.sync="innerDialogEmp" append-to-body @close="closeInnerDialogEmp">
            <div>
              <el-collapse v-model="activeName">
                <el-collapse-item v-for ="(dept,index) in deptList" :title="dept.deptName" :key="index" :name="dept.deptId">
                  <ul class="emp-ul">
                    <li @click="choiceEmp(emp)" v-for="(emp,index) in dept.employeeByDeptId">
                      <span v-if="index !== dept.employeeByDeptId.length-1" class="line-style"></span>
                      <span v-if="index === dept.employeeByDeptId.length-1" class="line-style-end"></span>
                      <span class="">{{emp.empName}}</span>
                    </li>
                  </ul>
                </el-collapse-item>
              </el-collapse>
            </div>
          </el-dialog>
        </el-form>
        <!--内层dialog-->
        <el-dialog width="30%" title="全部客户" :visible.sync="innerDialog" append-to-body>
          <!--选择客户-->
          <el-table :data="customerList" style="width: 100%">
            <el-table-column prop="customerId" label="客户编号" >
            </el-table-column>
            <el-table-column prop="customerName" label="客户名" >
            </el-table-column>
            <el-table-column label="请选择" >
              <template slot-scope="scope">
                <el-button size="mini" @click="choiceCustomer(scope.row)" icon="el-icon-check" type="primary" circle style="margin-left: 10px"></el-button>
              </template>
            </el-table-column>
          </el-table>
          <el-row style="margin-top:10px">
            <el-col :span="16">
              <el-pagination layout="prev, pager, next, jumper" :total="cusTotalSize" @current-change="cusChangePage"
                             :current-page.sync="cusCurrPage" :page-size="cusPageSize"></el-pagination>
            </el-col>
          </el-row>
        </el-dialog>
      </el-dialog>
    </el-row>
    <!--投诉管理表格-->
    <el-table ref="multipleTable" :data="complainList" tooltip-effect="dark"
              style="width: 100%"  @selection-change="handleSelectionChange" border>
      <el-table-column type="selection" ></el-table-column>
      <el-table-column prop="complainId" label="ID" wsortable></el-table-column>
      <el-table-column prop="complainTheme" label="投诉主题" ></el-table-column>
      <el-table-column prop="complainType"  label="分类" >
        <template slot-scope="scope">
          <span v-if="scope.row.complainType===1">产品投诉</span>
          <span v-if="scope.row.complainType===2">服务投诉</span>
          <span v-if="scope.row.complainType===3">客户意见</span>
          <span v-if="scope.row.complainType===4">其他</span>
        </template>
      </el-table-column>
      <el-table-column prop="customerByCustomerId.customerName" label="对应客户" ></el-table-column>
      <el-table-column prop="complainDate"  label="日期" ></el-table-column>
      <el-table-column prop="complainTime"  label="时间" ></el-table-column>
      <el-table-column prop="complainUrgentLevel" label="紧急程度" >
        <template slot-scope="scope2">
          <span v-if="scope2.row.complainUrgentLevel===5">非常紧急</span>
          <span v-if="scope2.row.complainUrgentLevel===6">急</span>
          <span v-if="scope2.row.complainUrgentLevel===7">普通</span>
        </template>
      </el-table-column>
      <el-table-column prop="employeeByEmpId.empName"  label="接待人" ></el-table-column>
      <el-table-column prop="complainHandleResult"  label="处理结果" >
        <template slot-scope="scope3">
          <span v-if="scope3.row.complainHandleResult===8">未处理</span>
          <span v-if="scope3.row.complainHandleResult===9">处理中</span>
          <span v-if="scope3.row.complainHandleResult===10">处理完成</span>
        </template>
      </el-table-column>
      <el-table-column prop="complainContactName" label="投诉人" ></el-table-column>
      <el-table-column prop="" label="操作" width="135px">
        <template slot-scope="scope">
          <el-tooltip class="item" effect="dark" content="编辑" placement="bottom">
            <el-button size="mini" @click="handleEdit(scope.row)"
                       icon="el-icon-edit" type="primary" circle style="margin-left: 10px"></el-button>
          </el-tooltip>
          <el-tooltip class="item" effect="dark" content="删除" placement="bottom">
            <el-button size="mini" @click="handleDelete(scope.row)"
                       icon="el-icon-delete" type="danger" circle></el-button>
          </el-tooltip>
        </template>
      </el-table-column>
    </el-table>
    <!-- 分页 -->
    <el-row style="margin-top:10px">
      <el-col :span="8">
        <el-tooltip class="item" effect="dark" content="删除" placement="bottom">
          <el-button style="padding: 12px 12px" icon="el-icon-delete"
                     @click="handleDeleteMany" type="danger"></el-button>
        </el-tooltip>
      </el-col>
      <el-col :span="16">
        <el-pagination :page-size="pageSize" layout="prev, pager, next, jumper" @current-change="changePage"
                       :total="totalSize"></el-pagination>
      </el-col>
    </el-row>
  </div>
</template>

<script>export default {
  data () {
    return {
      innerDialogEmp: false, // 内层dialog员工
      activeName: [],
      deptList: [],
      emp: {},
      emp2: {},
      ss: {},
      search: '',
      type: '',
      customerList: [], // 员工客户名称
      contactList: [], // 员工联系人集合
      cusPageSize: 2, // 分页页大小
      cusCurrPage: 1, // 当前页码，默认为1
      cusTotalSize: 0, // 总记录数
      isCustomer: true, // 客户搜索显示
      innerDialog: false, // 内层dialog客户
      customerValue: '', // 模糊查询客户
      customerList2: [], // 模糊查询结果
      visible: false, // 模糊搜索结果
      radio1: 4,
      radio2: 7,
      pageSize: 2, // 分页页大小
      currPage: 1, // 当前页码，默认为1
      totalSize: 0, // 总记录数
      AllOptions: [{
        value: 11,
        label: '全部数据'},
      {
        value: 8,
        label: '未处理'},
      {
        value: 9,
        label: '处理中'},
      {
        value: 10,
        label: '处理完成'},
      {
        value: 5,
        label: '非常紧急'},
      {
        value: 6,
        label: '急'},
      {
        value: 7,
        label: '普通'},
      {
        value: 1,
        label: '产品投诉'},
      {
        value: 2,
        label: '服务投诉'},
      {
        value: 3,
        label: '客户意见'},
      {
        value: 4,
        label: '其他'}],
      dialogFormVisible: false,
      direction: 'rtl',
      complainList: [],
      types: [{
        value: 1,
        label: '产品投诉'
      }, {
        value: 2,
        label: '服务投诉'
      }, {
        value: 3,
        label: '客户意见'
      }, {
        value: 4,
        label: '其他'
      }],
      times: [{
        value: 0,
        label: '1小时'
      }, {
        value: 1,
        label: '2小时'
      }, {
        value: 2,
        label: '半个工作日'
      }, {
        value: 3,
        label: '1个工作日'
      }, {
        value: 4,
        label: '2个工作日'
      }, {
        value: 5,
        label: '2个工作日以上'
      }],
      timer: '', // 定义一个定时器的变量
      currentTime: new Date(), // 获取当前时间
      complain: {
        complainId: 0,
        complainTheme: '',
        complainDescribe: '',
        complainType: '',
        complainUrgentLevel: '',
        complainHandleResult: '',
        complainReturnVisit: '',
        complainFeedback: '',
        complainCostTime: '',
        complainDate: '',
        complainTime: '',
        complainRemarks: '',
        complainContactName: '',
        customerByCustomerId: '',
        employeeByEmpId: ''
      },
      rules: {
        'customerByCustomerId.customerName': [
          { required: true, message: '请选择客户', trigger: 'blur' }
        ],
        complainTheme: [
          { required: true, message: '请输入投诉主题', trigger: 'blur' },
          { min: 2, max: 8, message: '长度在 2 到 8 个字符', trigger: 'blur' }
        ],
        'employeeByEmpId.empName': [
          { required: true, message: '请选择接待人', trigger: 'blur' }
        ],
        complainDate: [
          { required: true, message: '请选择日期', trigger: 'blur' }
        ],
        complainTime: [
          { required: true, message: '请选择时间', trigger: 'blur' }
        ]
      },
      mulSelection: []
    }
  },
  methods: {
    // 查询当前员工
    loginEmp () {
      this.$axios.get('http://localhost:8088/emp')
        .then(v => {
          this.emp = v.data
          this.emp2 = this.emp
        })
        .catch(function (v) {})
    },
    initData (currPage, pageSize) {
      this.$axios.get('http://localhost:8088/complain-list', {
        params: {
          page: currPage,
          size: pageSize,
          search: this.search,
          type: this.type}}
      )
        .then(v => {
          this.complainList = v.data.rows
          this.totalSize = v.data.total
        })
        .catch(function (v) {})
    },

    changeType () {
      this.initData(1, this.pageSize, this.search, this.type)
    },
    addComplain () {
      this.complain.complainUrgentLevel = this.radio1
      this.complain.complainHandleResult = this.radio2
      // eslint-disable-next-line no-undef
      this.$refs.complain.validate((valid) => {
        if (valid) {
          this.$axios.post('http://localhost:8088/complain-addComplain', this.complain)
            .then(v => {
              // 1、刷新数据
              this.initData(this.currPage, this.pageSize)
              // 2、关闭弹框
              this.dialogFormVisible = false
              // 3、重新初始化表单数据模型
              this.complain = {
                complainId: 0,
                complainTheme: '',
                complainDescribe: '',
                complainType: '',
                complainUrgentLevel: '',
                complainHandleResult: '',
                complainReturnVisit: '',
                complainFeedback: '',
                complainCostTime: '',
                complainDate: '',
                complainTime: '',
                complainRemarks: '',
                complainContactName: '',
                customerByCustomerId: '',
                employeeByEmpId: ''
              }
              this.radio1 = ''
              this.radio2 = ''
            })
            .catch(function (v) {})
        } else {
          console.log('error submit!!')
          return false
        }
      })
    },
    changePage (val) {
      this.initData(val, this.pageSize, this.search, this.type)
    },
    handleEdit (val) {
      this.dialogFormVisible = true
      this.complain.complainId = val.complainId
      this.complain.complainTheme = val.complainTheme
      this.complain.complainDescribe = val.complainDescribe
      this.complain.complainType = val.complainType
      this.radio1 = val.complainUrgentLevel
      this.radio2 = val.complainHandleResult
      this.complain.complainReturnVisit = val.complainReturnVisit
      this.complain.complainFeedback = val.complainFeedback
      this.complain.complainCostTime = val.complainCostTime
      this.complain.complainDate = val.complainDate
      this.complain.complainTime = val.complainTime
      this.complain.complainRemarks = val.complainRemarks
      this.complain.complainContactName = val.complainContactName
      this.complain.customerByCustomerId = val.customerByCustomerId
      this.complain.employeeByEmpId = val.employeeByEmpId
      this.ss = val.employeeByEmpId
      this.choiceContact(val.customerByCustomerId.customerId) // 根据客户名查询联系人集合
    },
    // 打开dialog事件
    openDialog () {
      if (this.complain.complainId === 0) {
        this.complain.employeeByEmpId = this.emp2
      }
      this.ss = this.complain.employeeByEmpId
    },
    // 关闭dialog事件
    closeDialog () {
      this.$refs.complain.resetFields()
      // 3、重新初始化表单数据模型
      this.complain = {
        complainId: 0,
        complainTheme: '',
        complainDescribe: '',
        complainType: '',
        complainUrgentLevel: '',
        complainHandleResult: '',
        complainReturnVisit: '',
        complainFeedback: '',
        complainCostTime: '',
        complainDate: '',
        complainTime: '',
        complainRemarks: '',
        complainContactName: '',
        customerByCustomerId: '',
        employeeByEmpId: ''
      }
      this.radio1 = ''
      this.radio2 = ''
    },
    // 打开内层dialog
    innerVisible (cusCurrPage, cusPageSize) {
      this.$axios.get('http://localhost:8088/emp-customer-list', {
        params: {
          page: cusCurrPage,
          size: cusPageSize
        }
      })
        .then(v => {
          this.customerList = v.data.rows
          this.cusTotalSize = v.data.total
        })
        .catch(function (v) {})
      this.innerDialog = true
    },
    // 查询部门员工
    findDeptList () {
      this.$axios.get('http://localhost:8088/dept-emp-list')
        .then(v => {
          this.deptList = v.data
          for (let i = 1; i <= this.deptList.length; i++) {
            this.activeName.push(i)
          }
        })
        .catch(function (v) {})
    },
    // 打开员工dialog
    openEmpDialog () {
      this.innerDialogEmp = true
      this.findDeptList()
    },
    // 关闭员工diglog事件
    closeInnerDialogEmp () {
      this.activeName = []
    },
    // 客户分页
    cusChangePage (val) {
      // val就是当前页码
      this.innerVisible(val, this.cusPageSize)
    },
    // 选择客户
    choiceCustomer (val) {
      this.complain.customerByCustomerId = val
      console.log(this.complain.customerByCustomerId)
      this.choiceContact(val.customerId)
      this.innerDialog = false
    },
    // 模糊查询客户
    findCustomer () {
      // eslint-disable-next-line eqeqeq
      if (this.customerValue != '') {
        this.visible = true
        this.$axios.get('http://localhost:8088/emp-fuzzy-customer-list', {
          params: {
            customerName: this.customerValue
          }
        })
          .then(v => {
            this.customerList2 = v.data
          })
          .catch(function (v) {})
      } else {
        this.visible = false
      }
    },
    // 模糊选择客户
    choiceCustomer2 (val) {
      console.log(val)
      this.complain.customerByCustomerId = val
      this.choiceContact(val.customerId)
      this.visible = false
    },
    // 选择联系人
    choiceContact (customerId) {
      this.$axios.get('http://localhost:8088/contact-list', {
        params: {
          customerId: customerId
        }
      })
        .then(v => {
          this.contactList = v.data
        })
        .catch(function (v) {})
    },
    // 选择员工
    choiceEmp (val) {
      this.complain.employeeByEmpId = val
      console.log(this.complain.customerByCustomerId)
      this.$axios.get('http://localhost:8088/contact-list', {
        params: {
          customerId: val.customerId
        }
      })
        .then(v => {
          this.contactList = v.data
        })
        .catch(function (v) {})
      this.innerDialogEmp = false
    },
    handleDelete (val) {
      this.$confirm('此操作将永久删除销售机会, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        console.log(val['id'])
        this.$axios.post('http://localhost:8080/save-emp', this.qs.stringify(val['id']))
        this.$message({
          type: 'success',
          message: '删除成功!'
        })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        })
      })
    },
    handleDeleteMany () {
      this.$confirm('此操作将永久删除勾选销售机会, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.deleteAll()
        this.$message({
          type: 'success',
          message: '删除成功!'
        })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        })
      })
    },
    handleSelectionChange (val) {
      this.mulSelection = val
    },
    deleteAll () {
      this.mulSelection.forEach(row => {
        console.log(row)
        this.$axios.post('http://localhost:8080/#/qaview', this.qs.stringify(row))
      })
    }
  },
  created: function () {
    this.loginEmp()
    this.initData(this.currPage, this.pageSize, this.search, this.type)
    this.$axios.get('http://localhost:8088/complain-list')
      .then(v => {
        this.complainList = v.data
      })
      .catch(function (v) {})
    var _this = this // 声明一个变量指向Vue实例this，保证作用域一致
    this.timer = setInterval(function () {
      _this.currentTime = // 修改数据date
        new Date().getFullYear() +
        '-' +
        (new Date().getMonth() + 1) +
        '-' +
        new Date().getDate() +
        ' '
    }, 1000)
  },
  beforeDestroy () {
    if (this.timer) {
      clearInterval(this.timer) // 在Vue实例销毁前，清除我们的定时器
    }
  }
}
</script>

<style>
  .font-14{
    font-size: 14px
  }

  .text-muted {
    color: #98a6ad;
  }
  .font-13 {
    font-size: 13px !important;
  }
  .text-right {
    text-align: right;
    float: right;
  }
  .form-inline{
    position: relative;
    top: -15px;
    left: 100px;
  }
  .font-14-bold{
    color: #000000;
    font-weight: bold;
  }
</style>
